<template>
    <div class="view">
        <nav-bar class="nav-fix" :title="user.nickname" :fixed="false" color="#9D9D9D" size="20px">
            <div slot="left">
                <i class="iconfont icon-xiaoxi" style="padding-left: 8px; color:#9d9d9d; font-size: 20px;" @click="toPage('messageList')"></i>
                <badge type="danger" :text="messageNotReadCount+''" v-if="messageNotReadCount>0"></badge>
            </div>
            <div slot="right">
                <a :href="'tel:'+tel">
                    <i class="iconfont icon-kefu1" style="padding-left: 8px; color: #9d9d9d; font-size: 20px;"></i>
                </a>
                <i class="iconfont icon-shezhi" style="padding-left: 8px; color:#9d9d9d; font-size: 20px;" @click="toPage('setting')">
                    <badge class="chat-badge new-app" type="danger" text="1" v-if="isAppUpdate"></badge>
                </i>
            </div>
        </nav-bar>
        <cube-scroll :data="giftList" class="scroll" ref="scroll" :scroll-events="['scroll']">
            <div class="mine-info">
                <div class="head-img-box" @click="toPage('mineAlbum')">
                    <head-img class="self-img"
                              :styleObject="{width:'18vw',height:'18vw'}"
                              showObject="self" :friend="self"
                              :self="self"
                              noneImgTip="上传头像"></head-img>
                    <p class="state-tip" v-if="user.avatar && user.avatar.fileStatus.status==0">审核中</p>
                </div>
                <div class="mine-base flex" @click.stop="toPage('mineData')">
                    <div class="mine-info-integrity flex">
                        <div class="level-or-integrity flex">
                            <span class="mine-vip-level ellipsis" @click.stop="becomeMember">{{user.userRank==1?'立即成为会员':user.rankName}}</span>
                            <span class="mine-data-integrity">资料完整度<em>{{user.infodegree}}%</em></span>
                        </div>
                        <div v-if="user.userRank>=2" class="iconfont icon-icon-test">&nbsp;{{user.validityTime | timeStampToDay2}}</div>
                        <div class="mine-info-score">余额<em>￥{{user.money}}</em></div>
                    </div>
                    <div class="self-data">资料 <span class="iconfont icon-youbian"></span></div>
                </div>
            </div>
            <div class="mine-album flex">
                <div class="mine-album-left">
                    <div class="to-album " @click="toPage('mineAlbum')"><span class="iconfont icon-plus"></span></div>
                    <div class="to-photo" v-for="(photo,index) in user.photo" :style="'background-image:url('+photo.uploadfile.file_path+'?imageView2/0/h/75/interlace/1)'"
                         @click="handleImgsClick(index)"></div>
                    <div class="to-photo" @click="toPage('mineAlbum')"><span class="iconfont icon-xiangji2"></span></div>
                    <div class="to-photo" @click="toPage('mineAlbum')"><span class="iconfont icon-xiangji2"></span></div>
                    <div class="to-photo" @click="toPage('mineAlbum')"><span class="iconfont icon-xiangji2"></span></div>
                </div>
                <div class="mine-album-right" @click="toPage('mineAlbum')">相册 <span class="iconfont icon-youbian"></span></div>
            </div>
            <div class="like-module flex">
                <div class="who-look-me" @click="toPage('whoLookMe')">
                    <p class="iconfont icon-ren"></p>
                    <p>谁看过我</p>
                </div>
                <div class="who-like-me" @click="toPage('whoLikeMe')">
                    <p class="iconfont icon-aixin2"></p>
                    <p>谁喜欢我</p>
                </div>
                <div class="i-like-who" @click="toPage('ILikeWho')">
                    <p class="icon-svg">
                        <!--                        <img :src="self.headImg" v-if="self.iLikeWho.length>0">-->
                        <!--                        <span v-else>-->
                        <span>
                            <svg class="svg-icon" aria-hidden="true">
                                <use :xlink:href="user.gender==2?'#icon-color-nyz':'#icon-touxiang-nv-wuguan'"></use>
                            </svg>
                        </span>
                    </p>
                    <p>我喜欢谁</p>
                </div>
                <div class="eachOther-like" @click="toPage('eachOtherLike')">
                    <p class="iconfont icon-aixin3"></p>
                    <p>相互喜欢</p>
                </div>
            </div>
            <div class="self-intro">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>我的特权</div>
                </div>
                <div class="content flex">
                    <cube-slide ref="slide" :interval="3000">
                        <cube-slide-item v-if="user.userRank>0">
                            <div class="privilege-item" @click="toPage('expertList')">
                                <div class="privilege-item-content">
                                    <div class="privilege-item-img" :style="'background-image: url('+require('@/assets/images/background-consultations.jpg') +')'"></div>
                                    <div class="privilege-item-text" :class="{'privilege-item-text-in-app':device.status}">
                                        <div class="privilege-item-title">情感专家1V1咨询<span>（VIP会员赠送3次）</span></div>
                                        <div class="privilege-item-desc">剩余<span>{{user.consultationNum}}</span>次</div>
                                    </div>
                                </div>
                            </div>
                        </cube-slide-item>
                        <cube-slide-item v-if="user.userRank>1">
                            <div class="privilege-item">
                                <a :href="'tel:'+tel">
                                    <div class="privilege-item-content">
                                        <div class="privilege-item-img" :style="'background-image: url('+require('@/assets/images/background-ceremony.jpg') +')'"></div>
                                        <div class="privilege-item-text" :class="{'privilege-item-text-in-app':device.status}">
                                            <div class="privilege-item-title">个人形象塑造</div>
                                            <div class="privilege-item-desc">
                                                <div class="privilege-item-desc-btn">预约报名</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </cube-slide-item>
                        <cube-slide-item v-if="user.userRank>1">
                            <div class="privilege-item">
                                <a :href="'tel:'+tel">
                                    <div class="privilege-item-content">
                                        <div class="privilege-item-img" :style="'background-image: url('+require('@/assets/images/background-teacher.jpg') +')'"></div>
                                        <div class="privilege-item-text" :class="{'privilege-item-text-in-app':device.status}">
                                            <div class="privilege-item-title">恋爱学习班</div>
                                            <div class="privilege-item-desc">
                                                <div class="privilege-item-desc-btn">马上学习</div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </cube-slide-item>
                    </cube-slide>
                </div>
            </div>

            <div class="self-intro">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>常用工具</div>
                </div>
                <div class="content flex">
                    <div class="mine-service flex">
                        <div class="mine-chunk" @click="toPage('mineMemberRank')">
                            <p class="icon-svg">
                                <svg class="svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-VIPhuangguan"></use>
                                </svg>
                            </p>
                            <p class="title">会员升级 </p>
                        </div>
                        <!--                <div class="mine-chunk">-->
                        <!--                    <p class="iconfont icon-daijinjuanguanli"></p>-->
                        <!--                    <p class="title">我的卡劵</p>-->
                        <!--                </div>-->
                        <div class="mine-chunk" @click="toPage('orderList')">
                            <p class="iconfont icon-dingdan"></p>
                            <p class="title">我的订单 </p>
                        </div>
                        <div class="mine-chunk" @click="toPage('addressList')">
                            <p class="iconfont icon-dizhichaxun"></p>
                            <p class="title">地址管理 </p>
                        </div>
                        <div class="mine-chunk" @click="toPage('mineIncome')">
                            <p class="icon-svg">
                                <svg class="svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-jinbi"></use>
                                </svg>
                            </p>
                            <p class="title">我的收益 </p>
                        </div>
                        <div class="mine-chunk" @click="toPage('mineShare')">
                            <p class="iconfont icon-tianjiayaoqingma"></p>
                            <p class="title">我的分享</p>
                        </div>
                        <div class="mine-chunk" @click="toPage('mineMatchmaker')">
                            <p class="iconfont icon-tubiao_UMEqianxian"></p>
                            <p class="title">红娘牵线</p>
                        </div>
                        <div class="mine-chunk" @click="toPage('mineFans')">
                            <p class="iconfont icon-fensi"></p>
                            <p class="title">我的粉丝</p>
                        </div>
                        <div class="mine-chunk" @click="toPage('businessApplication')">
                            <p class="icon-svg">
                                <svg class="svg-icon" aria-hidden="true">
                                    <use xlink:href="#icon-huabanfuben1"></use>
                                </svg>
                            </p>
                            <p class="title">入驻商城</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="self-intro authentication">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>我的认证</div>
                </div>
                <div class="content flex">
                    <div class="real" v-if="user.authentication === 0" @click="toPage('mineRealNameAuthentication')">
                        <div class="icon-box"><span class="iconfont icon-renzheng"></span></div>
                        <div>实名认证</div>
                    </div>
                    <div class="real" v-else>
                        <div class="icon-box is-real"><span class="iconfont icon-renzheng"></span></div>
                        <div>实名认证</div>
                    </div>
                </div>
            </div>
            <div class="self-intro self-gift">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>最近收到礼物</div>
                    <div @click="toPage('mineGiftLog')" class="more-text" v-if="allGiftCount>0">全部礼物(共{{allGiftCount}}件)<i style="padding-left: 5px;" class="cubeic-arrow"></i></div>
                </div>
                <div class="content flex">
                    <div class="gift-wrap">
                        <cube-scroll :data="giftList" direction="horizontal" class="horizontal-scroll-gift-list" v-if="giftList.length >0">
                            <div class="horizontal-scroll-gift-list-wrap">
                                <div class="gift-item" v-for="(gift) in giftList" :key="gift.id">
                                    <img class="gift-picture" :src="gift.image.file_path+'?imageView2/0/h/65'">
                                    <div class="gift-name">{{gift.snap_name}}</div>
                                    <div class="gift-price iconfont icon-yuanbao">{{gift.total_price}}</div>
                                </div>
                            </div>
                        </cube-scroll>
                        <div class="no-data" v-else>
                            暂无收到的礼物
                        </div>
                    </div>
                </div>
            </div>
            <div class="self-intro self-partner" v-if="user.isPartner || user.agentType">
                <div class="title flex">
                    <div class="deco-line"></div>
                    <div>我的团队</div>
                </div>
                <div class="content flex">
                    <div class="city-partner" v-if="user.isPartner" @click="toPage('minePartnerAgentRecord',{type:'partner'})">
                        <div class="top">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-hehuoren"></use>
                            </svg>
                        </div>
                        <div class="bottom">我的城市合伙人</div>
                    </div>
                    <div class="agent" v-if="user.agentType" @click="toPage('minePartnerAgentRecord',{type:'agent'})">
                        <div class="top">
                            <svg class="svg-icon" aria-hidden="true">
                                <use xlink:href="#icon-user-add2"></use>
                            </svg>
                        </div>
                        <div class="bottom">{{user.agentType==1?'省级':user.agentType==2?'市级':user.agentType==3?'区级':''}}代理</div>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Badge from "@/components/aui/Badge.vue";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import NavBar from "@/components/aui/NavBar.vue";
    import HeadImg from "@/components/HeadImg.vue";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, HeadImg, Badge
        }
    })
    export default class Mine extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private allGiftCount: number = 0;
        private tel: string = "";
        private userRank: string[] = [];
        private messageNotReadCount: number = 0;

        @State("UserStore")
        public user!: InterfaceUser;

        @State("DeviceStore")
        private device: any;

        private giftList: any[] = [];

        private get isAppUpdate(): boolean {
            if (this.device.status) {
                if (Number(this.device.netVersionCode) > Number(this.device.versionCode)) {
                    return true;
                }
                return false;
            }
            return false;
        }

        private get self(): any {
            return {
                iLikeWho: [],
                headImg: this.user.avatarId > 0 ? this.user.avatar.filePath + "?imageView2/0/h/90/interlace/1" : "",
                sex: this.user.gender
            };
        }

        private created() {
            this.getTel();
        }

        private activated() {
            (<any> this).$refs.scroll.refresh();
            (<any> this).$refs.slide.refresh();
            this.getMessageNotReadCount();
        }

        private updated() {
            // (<any> this).$refs.slide.refresh();
        }

        private getTel(): any {
            Http.get(this.api.getAppInfo, {type: "tel"}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.tel = res.data.content;
                }
            });
        }

        private getMyGiftList(): any {
            Http.get(this.api.getMyGiftList, {page: 1, size: 7}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.allGiftCount = res.data.total;
                    this.giftList.splice(0, this.giftList.length);
                    this.giftList.push(...res.data.data);
                }
            });
        }

        private toPage(name: string, query: any = {}): any {
            // if (name == "mineMemberRank") {
            //     if (this.user.userRank == 3) {
            //         (<any> this).$createToast({
            //             txt: `您已经是最高级会员,无需升级!`,
            //             type: "warn",
            //             time: 2500
            //         }).show();
            //         return;
            //     }
            // }
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private get userImgs(): string[] {
            const userImgs: string[] = [];
            for (let i in this.user.photo) {
                userImgs.push(this.user.photo[i].uploadfile.file_path);
            }
            return userImgs;
        }

        private handleImgsClick(index: Number): void {//好友图片预览
            const clientWidth = document.body.clientWidth;
            const params = {
                $props: {
                    imgs: this.userImgs.map((img) => img + "?imageView2/0/h/" + clientWidth + "/interlace/1"),
                    initialIndex: index, // 响应式数据的key名
                    loop: false
                },
            };
            (<any> this).$createImagePreview({...params}).show();
        }

        private toPhotoShow(): void {
            (<any> this).$createActionSheet({
                title: "上传照片",
                active: -1,
                data: [
                    {
                        content: `本地相册`
                    }
                ],
                onSelect: (item: any = {}, index: number) => {
                    (<any> this).$createToast({
                        txt: `Clicked ${item.content}`,
                        type: "correct",
                        time: 1000
                    }).show();
                },
                onCancel: () => {
                    (<any> this).$createToast({
                        txt: `取消上传`,
                        type: "warn",
                        time: 1000
                    }).show();
                }
            }).show();
        }

        private getMessageNotReadCount(): void {
            try {
                Http.get(this.api.getMessageNotReadCount, {}, {token: this.user.token}).then((res) => {
                    if (res.code == 1) {
                        this.messageNotReadCount = res.data.count;
                    } else {
                        (<any> this).$createToast({
                            time: 2500,
                            type: "error",
                            mask: true,
                            txt: `${res.msg}`,
                            onTimeout: () => {
                                this.navigateBack();
                            }
                        }).show();
                    }
                });
            } catch (e) {
                console.log(e);
            }
        }

        private mounted(): void {
            this.$nextTick(() => {
                this.getMyGiftList();
                this.showVipExpire();
            });
        }

        private becomeMember(): void {
            if (this.user.userRank === 1 || this.user.userRank === 2) {
                this.navigateTo({
                    name: "mineMemberRank"
                });
            }
        }

        private showVipExpire(): void {
            const nowShowTime = Date.parse(String(new Date())) / 1000;
            if (this.user.validityTime - nowShowTime < 7 * 24 * 60 * 60 && (this.user.userRank === 2 || this.user.userRank === 3)) {
                const lastShowTime = Number(localStorage.getItem("vipExpireTime") || "0");
                if ((nowShowTime - lastShowTime) > 24 * 60 * 60) {
                    (<any> this).$createDialog({
                        type: "confirm",
                        title: "会员等级即将到期",
                        content: "到期后将不能享受现有的会员服务哦",
                        confirmBtn: {
                            text: "立即续费",
                            active: true,
                            disabled: false,
                        },
                        cancelBtn: {
                            text: "放弃特权",
                            active: false,
                            disabled: false,
                        },
                        onConfirm: () => {
                            this.navigateTo({
                                name: "mineMemberRank"
                            });
                        }
                    }).show();
                    localStorage.setItem("vipExpireTime", String(nowShowTime));
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height calc(100vh - 47px);
        background $theme-page-common-background-color;

        .nav-fix
            width 100vw;
            position fixed;
            left 0;
            z-index: 100;

            i, icon-shezhi
                position relative !important;

            >>> .badge
                position relative;
                font-size 10px;

        .scroll
            height calc(100vh - var(--safe-area-inset-bottom) - 47px);

        .mine-info
            height 95px;
            background #fff;
            padding 10px;
            display flex;
            align-items center;
            position relative;
            margin-top calc(39px + var(--safe-area-inset-top));

            .head-img-box
                position relative;
                text-align center;
                border-radius 50%;
                overflow hidden;

                .state-tip
                    width 100%;
                    height 20px;
                    line-height 20px;
                    color #fff;
                    font-size 10px;
                    background-color rgba(0, 0, 0, .5);
                    position absolute;
                    bottom 0;
                    left 0;

            .mine-base
                width calc(100vw - 75px);
                height 76px;
                padding 8px 0px 10px 8px;
                justify-content space-between;
                align-items center;
                //flex-direction column;
                position relative;
                flex-wrap nowrap;

                .mine-info-integrity
                    width calc(100vw - 75px - 75px);
                    flex-wrap wrap;
                    height 60px;
                    align-content space-between;
                    color #8b8b8b;

                    > div
                        width 100%;

                    .level-or-integrity
                        justify-content: space-between;

                        .mine-vip-level
                            padding 0 10px;
                            background $theme-common-color;
                            color #fff;
                            font-size 12px;
                            display block;
                            height 18px;
                            line-height 18px;
                            border-radius 10px;

                        .mine-data-integrity
                            font-size 12px;
                            display flex;
                            align-items center;
                            justify-content: flex-end;

                            em
                                padding-left 3px;
                                color $theme-advancing-color;
                                font-size 17px;


                    .icon-icon-test
                        font-size 12px;

                    .mine-info-score
                        color #7f7f7f;
                        font-size 13px;

                        em
                            color $theme-contrast-color;
                            font-size 14px;
                            font-style normal;
                            padding 0 1px;

                .self-data
                    color #8b8b8b;

        .mine-album
            height 80px;
            background #fff;
            padding 10px;
            justify-content: space-between;
            align-items center;
            color #8b8b8b;

            .mine-album-left
                width calc(100vw - 85px);
                overflow hidden;
                flex-wrap wrap;
                height 16vw;
                display flex;
                align-items center

                > div
                    flex 0 0 60px;
                    height 60px;
                    line-height 60px;
                    text-align center;
                    border-radius 5px;
                    margin-right 5px;

                .to-album
                    color $theme-viceColor-font;
                    border 1px dashed $theme-line-color;
                    position relative;

                    span.icon-plus
                        display block;
                        font-size 30px;


                div.to-photo
                    background-color $theme-page-common-background-color;
                    background-size cover;
                    background-position center

                    span.icon-xiangji2
                        font-size 30px;
                        color #fff;

        .like-module
            background #fff;
            padding 10px 0px;
            justify-content: space-around;
            text-align center;

            > div
                width 25vw;
                height 80px;
                display flex;
                flex-wrap wrap;
                align-content space-between;

                > p
                    width 25vw;
                    height 40px;
                    line-height 40px;

                p.iconfont
                    font-size 26px;

                    &:before
                        background: -webkit-gradient(linear, left top, left bottom, from(#FFC4B5), to($theme-common-color));
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;

                p.icon-svg
                    font-size 28px;
                    line-height 40px;

                    img
                        display inline-block;
                        width 40px;
                        height 40px;
                        border-radius 50%;

                    span
                        display inline-block;
                        width 40px;
                        height 40px;
                        background-color $theme-page-chat-background-color;
                        border-radius 50%;

        .mine-service
            //margin-top 5px;
            flex-wrap wrap;
            background #fff;
            text-align center;

            .mine-chunk
                display flex;
                flex-wrap wrap;
                align-content center;
                width 25vw;
                height 27vw;
                border-right 1px solid $theme-line-color;
                border-bottom 1px solid $theme-line-color;

                > p
                    width 25vw;

                p.iconfont, p.icon-svg
                    font-size 30px;
                    line-height 50px;

                p.icon-svg
                    font-size 34px;

                p.icon-daijinjuanguanli
                    color #FF4000;

                p.icon-dingdan
                    color #3DA1FF;

                p.icon-dizhichaxun
                    color #00D2DC;

                p.icon-tianjiayaoqingma
                    color $theme-common-color;

                p.icon-tubiao_UMEqianxian
                    color red;

                p.icon-fensi
                    color #4FBB88;

            .mine-chunk:nth-child(4n)
                border-right-width 0 !important;

        .self-intro
            margin-top 24px;
            background-color #fff;

            > .title
                font-size 14px;
                align-items center;
                height 40px;
                position relative;

                &::after
                    display block;
                    content '';
                    width calc(100vw - 30px);
                    height 1px;
                    background-color $theme-line-color;
                    position absolute;
                    bottom 0px;
                    left 15px;

                .deco-line
                    width 20px;
                    height 20px;
                    border-left 2px solid $theme-common-color;

                .more-text
                    font-size 12px;
                    color #aaa;
                    position absolute;
                    right 10px;
                    height 40px;
                    line-height 40px;

                .title-text
                    width calc(100vw - 20px - 20px);

                    span
                        color $theme-common-color;

            .content
                line-height 1.4em;

        .authentication
            margin-top 20px;

            .content
                padding 15px;
                justify-content: center;

                .real
                    text-align center;

                    .icon-box
                        width 60px;
                        height 60px;
                        border-radius 50%;
                        background-color $theme-page-common-background-color;
                        line-height 60px;
                        margin-bottom 10px;

                        .icon-renzheng
                            font-size 25px;
                            color #fff;

                    .is-real
                        background #DE1B9A !important;

        .gift-wrap
            width 100vw;

            .horizontal-scroll-gift-list
                >>> .cube-scroll-content
                    display inline-block

                .horizontal-scroll-gift-list-wrap
                    white-space nowrap


            .gift-item
                display inline-block
                width calc(30vw - 10px);
                position relative;
                justify-content space-between;
                align-items center;
                margin 5px;
                padding 7px;
                box-sizing border-box
                flex-direction column;
                border-radius 5px;


                img.gift-picture
                    width calc(30vw - 30px);
                    height calc(30vw - 30px);
                    display block;
                    margin auto

                .gift-name
                    color #878787;
                    margin-top 2px
                    font-size 14px;
                    text-align center;

                .gift-price
                    color #bbb;
                    font-size 13px;
                    line-height 20px;
                    text-align center;

                    &::before
                        padding-right 2px;
                        font-size 11px;


        .self-partner
            .content
                padding 15px;
                justify-content center;
                text-align center;

                .top
                    width 60px;
                    height 60px;
                    line-height 60px;
                    margin 0 auto;
                    border-radius 50%;
                    background-color $theme-page-common-background-color;

                    svg
                        font-size 40px;
                        vertical-align middle;

                .bottom
                    width calc(50vw - 15px);
                    margin-top 5px;

    .privilege-item
        width 100vw;
        overflow hidden

        .privilege-item-content
            margin 10px 20px
            height 100px;
            border-radius 10px;
            box-shadow: 0 .5px 10px rgba(0, 0, 0, 0.21)
            overflow hidden
            position relative;

            .privilege-item-img
                background-position center;
                background-size cover;
                filter blur(1px);
                opacity .2;
                position absolute;
                width 100%;
                height 100%;
                top 0;
                left 0;

        .privilege-item-text-in-app
            font-family lovely !important;

        .privilege-item-text
            width 100%;
            height 100px;
            display flex;
            justify-content space-between;
            flex-direction column;
            color $theme-common-color
            padding 10px 20px;


            .privilege-item-title
                font-size 19px;
                font-weight 700

                span
                    font-size 13px;

            .privilege-item-desc
                text-align right;
                font-size 15px;

                .privilege-item-desc-btn
                    padding 5px 15px;
                    display inline;
                    border-radius 3px;
                    border 1px solid $theme-common-color;
                    background rgba(255, 255, 255, .2);

                span
                    font-size 20px;
                    padding 0 5px;

    .new-app
        position absolute !important;
        color rgba(0, 0, 0, 0);
        right -5px;
        top -5px;
        transform scale(.4)
</style>
